<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 实例 -->
    <div id="app">
        <!-- for循环出每一个数据，有三次就掉用了三次组件，每次传入我们循环出来的数据item -->
        <div v-for="item in msgList" :key="item.id">
            <my-cpn :msg="item"></my-cpn>
        </div>
    </div>
    <!-- 实例 -->


    <script src="../js/vue.js"></script>

    <!-- 组件 -->
    <template id="myCpn">
        <div>
            <!-- 因为我们每次拿到的都是数组的每一个值，这里我写了一个按钮给你log了一下 你可以去页面查看一下 -->
            <div>
                id是:{{ msg.id }}
            </div>
            <div>
                name是:{{ msg.name }}
            </div>
            <button @click="viewData">查看父组件传过来的数据</button>
        </div>
    </template>
    <!-- 组件 -->

    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    msgList:[
                        {
                            id:1,
                            name:'我是第一个内容:如手机'
                        },
                        {
                            id:2,
                            name:'我是第二个内容:如手电筒'
                        },
                        {
                            id:3,
                            name:'我是第三个内容:如风扇'
                        }
                    ],
                    msg:{
                        name:'我是父组件中的数据'
                    }
                }
            },
            methods:{

            },
            components:{
                'my-cpn':{
                    template:'#myCpn',
                    props:['msg'],
                    data(){
                        return {

                        }
                    },
                    methods:{
                        // 查看数据掉用的按钮
                        viewData(){
                            console.log(this.msg)
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>